/* 第一种，使用行内元素性质完成居中 */
.middle-block {
  width: 300px;
  height: 300px;
  text-align: center;
  border: 2px solid #eee;
}
.middle-inline {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: royalblue;
}
/* 第二种，使用水平margin:auto是自动分配剩余空间 */
.middle-margin {
  width: 300px;
  height: 300px;
  border: 2px solid #eee;
}
.middle-auto {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: salmon;
}
/* 第三种， 子绝父相 */
.middle-relative {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid #eee;
}
.middle-absolute {
  position: absolute;
  /* top: 50%; */
  left: 50%;
  /* 水平垂直居中 */
  /* transform: translate(-50%, -50%); */
  /* 已知子元素宽 */
  /* transform: translateX(-50px);   */
  /* 子元素宽未知，已知均可 */
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  background-color: slateblue;
}
